<link href="../core/resource/css/diy.css?v=202103" rel="stylesheet">
<style>
.tm .btn { margin-bottom:5px;}
th,td {
	text-align:left
}
.line{text-align:center;padding:0;}
.drag{
	padding:5px;
}
.drag img{
	width:80px;
	padding:5px 0;
}
.drag .img1{
	text-align:center;
}
.drag .img2{
	text-align:right;
}
.drag .textstytle1{
	text-align:center;
}
.drag .textstytle2{
	text-align:right;
}
.drag .fontstytle1{
	font-size:16px;
}
.drag .fontstytle2{
	font-size:20px;
}
.drag .fontstytle3{
	font-size:25px;
}
.drag .fontstytle4{
	font-size:30px;
}
.drag .fontstytle5{
	font-size:35px;
}
.drag .fontstytle6{
	font-size:40px;
}
.drag .fontstytle7{
	font-size:45px;
}
.drag .fontstytle8{
	font-size:50px;
}
</style>
<div class="col-jy" style="width:100%">
    <div class="col-sm-12">
		<table style='width:100%;'>
            <tr>
            <td class="phone-main" style='width:320px;padding:10px;' valign='top'>
				<div class="diy-phone">
					<div class="phone-body">
					<div class="phone-main ui-sortable" id="phone">
					<div id="editor">
						<div style="text-align:center;font-size:16px;background:#f2f2f2;padding:8px">{{pagedata.item.title||'模板名称'}}</div>
						<div ng-class="{'drag':1,'selected':pagedata.index==$index}" ng-repeat="inav in pagedata.item.print_data track by $index" ng-click="pagedata.editdata=inav;pagedata.index=$index;"> 
							<div class="btn-edit-del" ng-show="pagedata.index==$index" ng-click="pagedata.index=$index-1;pagedata.item.print_data.splice($index,1)"></div>
							<div ng-if="inav.type=='toplogo'" class="img{{inav.textstytle}}"><img ng-src="{{tomedia(inav.value)||'../addons/jy_weishop/resource/images/plogo.png'}}"/></div>
							<div ng-if="inav.type=='text'" class="textstytle{{inav.textstytle}} fontstytle{{inav.fontstytle}} {{inav.bold==1?'bold':''}}">{{inav.value}}</div> 
							<div ng-if="inav.type=='goodsinfo'" class="line">
							<div class="row margin0 bold" style="text-align:center">
								<div class="col-sm-6" style="text-align:left">品名</div>
								<div class="col-sm-3">数量</div>
								<div class="col-sm-3">单价</div>
							</div>
							<div class="row margin0" style="text-align:center">
								<div class="col-sm-7" style="text-align:left">青提柠檬</div>
								<div class="col-sm-2">2</div>
								<div class="col-sm-3">18</div>
							</div>
							</div>  
							<div ng-if="inav.type=='line'" class="line">---------------------------------------------</div>  
							<div ng-if="inav.type=='ewm'" class="img{{inav.textstytle}}"><img src="../addons/jy_weishop/resource/images/qr.jpg"/></div>
							<div ng-if="inav.type=='code'" class="img{{inav.textstytle}}"><img style="height:80px;width:auto" src=""/></div>
						</div>                 
					 </div>
					 </div>
					 </div>
				 </div>
			</td>
			<td valign='top' style='padding:10px;'>
            <div class='panel panel-default form-horizontal'>
            <div class='panel-body'>
            <form action="" method="post" class="form-horizontal form-validate" enctype="multipart/form-data">
            <input type="hidden" name="template" value="" />
            <div class="form-group">
                <label class="col-xs-12 col-sm-3 col-md-2 left-label" >模板名称</label>
                <div class="col-sm-9 col-xs-12"> 
                    <input type="text" name="name" ng-model="pagedata.item.title" class="form-control" value="" placeholder="模版名称" data-rule-required='true' />
                    
                </div>
            </div>
			<div class="form-group">
                  <label class="col-xs-12 col-sm-3 col-md-2 left-label">重置模板</label>
                   <div class="col-xs-12 col-sm-8 col-md-10">
                       <button ng-repeat="item in pagedata.datademos" class='btn btn-default btn-com' style="margin-right:5px" type='button' ng-click="pagedata.item.print_data=item.data;">{{item.title}}</button>
					   <div class="help-block">点击重置不同的模板类型</div>
                  </div>
             </div>
			 <div class="form-group">
				<div class="col-sm-12" style="height:20px;border-top: 1px solid #d9d9d9;"></div>
			 </div>
			 <div class="form-group key_item">
                    <label class="col-xs-12 col-sm-3 col-md-2 left-label">打印内容</label>
                     <div class="col-sm-9">
                        <div ng-if="pagedata.editdata.type=='text'">
                            <input type="text" id="value" ng-model="pagedata.editdata.value" class="form-control valid" aria-invalid="false">
                        </div>
						<div ng-if="pagedata.editdata.type=='toplogo'">
                            <div class="input-group">
								<input type="text" ng-model="pagedata.editdata.value" ng-change="pagedata.upeditdata()" class="form-control" autocomplete="off">
								<span class="input-group-btn">
									<button class="btn btn-primary" type="button" ng-click="image(pagedata.editdata,'value')">选择图片</button>
								</span>
							</div>
                        </div>
						<div ng-if="pagedata.editdata.type=='ewm'">
                            <div class="input-group">
								<input type="text" class="form-control" placeholder="设置二维码链接"  ng-model="pagedata.editdata.value"/>
								<span class="input-group-btn">
									<button class="btn btn-primary" type="button" ng-click="choose_link(pagedata.editdata,'value')"><i class="fa fa-external-link"></i> 二维码链接</button>
								</span>
							</div>
                        </div>
                        <div ng-if="pagedata.editdata.type=='text'" class="help-block">
                               <label ng-repeat="tv in pagedata.textstytle" class="radio-inline">
							   <input type="radio" value="{{$index}}" ng-model="pagedata.editdata.textstytle" ng-checked="pagedata.editdata.textstytle==$index"> {{tv}}
							   </label>
                        </div>
						<div class="help-block">部分打印机字体大小只有两种：（正常大小，两倍大小），所以上面的设置不一定生效！</div>
						<div ng-if="pagedata.editdata.type=='text'" class="help-block">
                               <label ng-repeat="tv in pagedata.bold" class="radio-inline">
							   <input type="radio" value="{{$index}}" ng-model="pagedata.editdata.bold" ng-checked="pagedata.editdata.bold==$index"> {{tv}}
							   </label>
                        </div>
						<div ng-if="pagedata.editdata.type=='text' || pagedata.editdata.type=='goodsinfo'" class="help-block">
                               <label ng-repeat="tv in pagedata.fontstytle" class="radio-inline">
							   <input type="radio" value="{{$index}}" ng-model="pagedata.editdata.fontstytle" ng-checked="pagedata.editdata.fontstytle==$index"> {{tv}}
							   </label>
                        </div>
                        <div ng-if="pagedata.editdata.type=='text'" class="help-block">例如: <span class="">[商品名称] x[商品数量]</span> ----  只有选择右边的变量标签，才会识别生效（[变量标签]）！,</div>
                    </div>
             </div>
            <div class="form-group">
                  <label class="col-xs-12 col-sm-3 col-md-2 left-label">添加内容</label>
                   <div class="col-xs-12 col-sm-8 col-md-10">
                       <button ng-repeat="item in pagedata.datatypes" class='btn btn-default btn-com' style="margin-right:5px" type='button' ng-click="func.add(item);">{{item.title}}</button>
					   <div class="help-block">点击添加不同的内容</div>
                  </div>
             </div>
			 <div class="modal-sub"><button class="btn btn-primary" href="javascript:" ng-click="pagedata.upeditdata();post(pagedata.item,'post')">提交</button></div>
           </form>
        </div>
		</div>
       </td>
		<td valign='top' style='padding:10px;'>
            <div class="panel panel-default" style="width:200px;margin-left:20px;">
                <div class="panel-heading">
                    <select class="form-control" ng-model="pagedata.nowtagsindex">
                        <option value="" ng-selected="pagedata.nowtagsindex==''">选择变量类型</option>
                        <option ng-repeat="op in pagedata.msgtpl_tags" ng-selected="pagedata.nowtagsindex==$index" value="{{$index}}">{{op.title}}</option>
                    </select>
                </div>
                <div class="panel-body" >
                    <a href='JavaScript:' ng-repeat="tv in pagedata.msgtpl_tags[pagedata.nowtagsindex]['data']" class="btn btn-default btn-sm" style="margin:2px;">{{tv.name}}</a>
                </div>
                <div class="panel-footer">
                    点击变量后会自动插入选择的文本框的焦点位置，在发送给粉丝时系统会自动替换对应变量值
                    <div class="text text-danger">
                        注意：以上模板消息变量只适用于系统类通知，会员群发工具不适用
                    </div>
                </div>
            </div>
			 </td>
            </tr>
        </table>
        </div>
    </div>
</div>
<script language='javascript'>
scope.pagedata.nowtagsindex=1;
$(function () {
        require(['jquery.caret'],function(){
            var jiaodian;
            $(document).on('focus', 'input,textarea',function () {
                jiaodian = this;
            });

            $("a[href='JavaScript:']").click(function () {
                if (jiaodian) {
					console.log(this.innerText)
                    $(jiaodian).insertAtCaret("["+this.innerText+"]" );
					if($("#value").val()){
						scope.pagedata.editdata.value=$("#value").val();
						scope.pagedata.item.print_data[scope.pagedata.index]=scope.pagedata.editdata;
						scope.$evalAsync();
					}
                }
            })

        });
})
scope.func.add=function(nav){
		var new_item={'type':nav.type,'value':nav.value};
		scope.pagedata.index+=1;
		scope.pagedata.item.print_data.splice(scope.pagedata.index,0,new_item);
		scope.pagedata.editdata=scope.pagedata.item.print_data[scope.pagedata.index];
		scope.$evalAsync();
}
scope.pagedata.upeditdata=function(){
	console.log('upeditdata')
	scope.pagedata.item.print_data[scope.pagedata.index]=scope.pagedata.editdata;
	scope.$evalAsync();
}
</script>

